Kali mendesain grid 
Data nya bentuk grid bukan bentuk listview 
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Media Playback Audio Video Subtitle Tools View Help 
X] File Edit Selection Vie Run Terminal Help prov reen.dart - covic 


a x E O Q & provinsi screen.dart X & 


COVID PROJECT 
MB dart too! 


» 
body: Future er( 
future: dataCovid.fetchData(), 
builder: (context, snapshoot) ( 
(snapshoot.connectionState -- 
.waiting) ( 
ter( 


"cularProgressIndicator(), 


DKI JAKARTA 


builder( 
itemCount: dataCovid.dataProvinsi.length, 
itemBuilder: (context, index) ( rapi ETTE 
final data - dataCovid.dataProvinsi[index] 


KALIMANTAN TIMUR 
ListTil 
PROBLEMS (6 
art 
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OUTLINE 
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DEPENDENCIES 


€ 
00:11 


I [mn riu Fs o d 


Buat folder widget isinya item dari gridview.builder 
Buat Namanya provinsi item.dart 

Buat stl provinsiltem 

Return bentuknya container 

Dan dia meminta dataCovid dataProvinsi buat tambah dicontructor dan const di 
hapus 


A 2. Covid App 02.mp4 - VLC media player 
Media Playback Audio Video Subtitle 
X] File Edit Selection Vie Run Terminal Help ovinsi item.dart - covic Visual Studio € Donon 


rm 5 Q & 


Tools View Help 


COVID PROJECT iget > È pro 
In dart to import 
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e ? key, re ed this.dataProvinsi}) : DI DARET 
(key: key); 
d dataProvinsi; 


@override 
Widget build ntext context) ( 


turn Cor 


JAWA TIMUR 


item.dart 


DAERAH ISTIMEWA YOGYAKARTA 


KALIMANTAN TIMUR 


PROBLEM! 


SUMATERA UTARA 


OUTLINE 
TIMELINE 
DEPENDENCIES 


01:42 


Kemudian tampilkan text child nya 
Tanda seru karna null lebel 


A 2. Covid App 02.mp4 - VLC media player — x 
Media Playback Audio Video Subtitle Tools View Help 
X] File Edit Selection View Go Run Terminal Help si item.dart - covid project ooo oo - 


Q X E n o | & & provinsi item.dart X & 
COVID PROJECT iget) È | 


import 


tem extenc 3 
(Key? key, required this.dataProvinsi)) 
super(key: key); 
vid dataProvinsi; JAWA BARA 


DKI JAKARTA 


@override JAWA TENGAH 
Widget build(B Context context) { 


item.dart return C 


child :] Text(d taProvinsi.key!), 


); e 
} 


} DAERAH ISTIMEWA YOGYAKARTA 
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'SUMATERA UTARA 


OUTLINE 
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Sudah membuat 
Dilistview ganti gridview 


A 2. Covid App 02.mp4 - VLC media player — x 
Media Playback Audio Video Subtitle 
X] File Edit Selection View Go Run Terminal Help si screen dart - cx V Studio 0o00 o - o 


Tools View Help 


" 
COVID PROJECT 


& dart to child: CircularProgres 


.builder( DKI JAKARTA 
itemCount: dataCovid.dataProvinsi.length, 
itemBuilder: (context, index) ( JAWA BARA 
final data - dataCovid.dataProvinsi[index] 


; AWA TENGAH 
retur ListTile( 
title: Text(data.key!), ine Mata 
subtitle: Text(data. jumlahKasus.toString 
0), 
); 
) 


AERAH ISTIMEWA YOGYAKARTA 


E 


KALIMANTAN TIMUR 
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TIMELINE 
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02:33 
Ho [mmn] riu Sisik 


itemBuilder dan itemCount 
dia butuh gridDelege: 
slivergridDelege buat 2 


A 2. Covid App 02.mp4 - VLC media player — x 
M 


edia Playback Audio Video Subtitle Tools View Help 


X] File Edit Selection View Go Run Terminal Help provinsi screen.dart - covid project - Visu: 


Q X u D 1 & provinsi screen.dart X & 
COVID PROJECT &: 
M dart toc retu Gridvi builder( 
gridDelegate: 
SliverGridDelegateWithFixedCros|sAxisCount( 
crossAxisCount: 2. DKI JAKARTA 
» 
itemCount: dataCovid.dataProvinsi.lengt 
itemBuilder: (context, index) ( 
F 1 data = dataCovid.dataProvinsi| index) 
AWA TENGAH JAWA TIMUR 
ListTile( 
si item.dart title: Text(data.key!), 
art subtitle: Text( 
data. jumlahKasus.toString(), 
), 


BANTEN DAERAH ISTIMEWA 


YOGYAKARTA 


PROBLEMS 


material.dart 
ry removing the import di 
vinsi_screen.dart 
OUTLINE ) Prefer const with constant constructors, dart 
TIMELINE Prefer const with constant c 


DEPENDENCIES nst with c 


^ & B uw uq os 


03:06 

Hoo omm] DI S 

Untuk menghapus keriteng 

A 2. Covid App 02.mp4 - VLC media player — x 
Media Playback Audio Video Subtitle Tools View Help 


Run Terminal Help provinsi screen.dart 


© provinsi screen.dart X 


COVID PROJECT @ | 
M dart to: retu 


GridViev 


gridDelegate: 


DKI JAKARTA 


i.length, 


Ignore 'prefer const constn. or this line 


Ignore 'prefer const constructors' for this file c. 
vinsi[index] 
Extract Me 


\ AWA TENGA JAWA TIMUI 
Extract Local Variable E TENEAT An 


title: Text(data.key!), 


subtitle: Text( 
data.jumlahKasus.toString(), 


)» 


DAERAH ISTIMEWA 
YOGYAKARTA 


PROBLEMS '9 


KALIMANTAN TIMUR 
ry removing the import di 
screen dart 
OUTLINE ) inst with constant constructors. dai 
TIMELINE nst with c 


DEPENDENCIES D P nst with const 


03:21 10:10 
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Kemudian mainAxis 20 
Dan 
childAspecratio tinggi nya 3 lebar 5 


A 2. Covid App 02.mp4 - VLC media player — x 


Media Playback Audio Video Subtitle Tools View Help 


X] File Edit Selection View Go Run Terminal Help c dart 


Q X E u ) 1 & provinsi screen.dart X & 
COVID PROJECT & | 
M dart to 
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urn GridVie 

gridDelegate: DKI JAKARTA 

S rGridDelega thFixedCrossAxisCount( 
crossAxisCount: 
mainAxisSpacin 
crossAxisSpacing 

si screen.dart 3 childAspectRatio 
), 
item.dart itemCount: dataCovid.dataProvinsi.length, 
itemBuilder: (context, index) ( 


JAWA TIMUR 


ile( 
xt(data.key!), 
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nst with 
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Kemudian listTile ganti tidak memberikan listile 


Isi provinsiltem dia membuttuhkan dataProvinsi dia ambil dari data 


A 2. Covid App 02.mp4 - VLC media player — x 
Media Playback Audio Video Subtitle 


X] File Edit Selection View Run Terminal Help prov creen.dart - covid pro 1 io Code JF! 08 


oO x " £ Q © provinsi screendart X © 
COVID_PROJECT 
B. dart to crossAxisSpacing: 2€ 
id childAspectRatio 
B android » 


Tools View Help 


itemCount: dataCovid.dataProvinsi.length, 
itemBuilder: (context, index) ( 
data - dataCovid.dataProvinsi[index] 


Provir ( 
dataProvinsi: data, 


item.dart 


PROBLEMS 


put 
O re 

OUTLINE 

TIMELINE D) Thi c h s rits from) is marked as '( 

DEPENDENCIES 


^ & B (9 c or 
04:33 10:10 


1 Rp tim) mix c d 
Maka sudah tampil masing2 provinsi 

Sekarang desain 

Kasih color 


Å 2. Covid App 02.mp4 - VLC media player 
Media Playback Audio 


Video 


Subtitle Tools 


View 


Help 
Selection View Go Run Terminal Help provinsi item.dart 


covid project ual Stu 
4006 


© provinsi item.dart X 


Provinsiltem StatelessWidget ( 
Provinsiltem((Key? key, 
(key: key); 


.dataProvinsi)) 
DataCovid dataProvinsi; 


JAWA BARAT 
@override 
Widget build(BuildContext context) { 
Container( 
lBicolors.amber, 


Text(dataProvinsi.key!), 


JAWA TIMUR 
package 
analysis optio: 


vid pr 


2 
Prefer const with constant 
const with constant 
F P 3a d 1 DAERAH ISTIMEWA 
[ README import: 'package-flutt — 
OUTLINE y removing the imp 
> TIMELINE item.dart 
DEPENDENCIES (or a class 
04:43 
DP) Ka i20 c 
Å 2. Covid App 02.mp4 - VLC media player 
Media 


Playback 


Audio 


Video 


Subtitle 


Tools 


Run Terminal Help provinsi sc 


© provinsi screendart X 


crossAxisSpacing: 


childAspectRatio: 5 / 
» 


itemCount: dataCovid.dataProvinsi.lengt 
itemBuilder: (context, index) ( 


JAWA BARAT 
data = dataCovid.dataProvinsil index) 


ProvinsiItem( 


JAWA TIMUR 
dataProvinsi: data, 


DAERAH ISTIMEWA 
YOGYAKARTA 


JSUMATERA UTARA 
@ README.md 


OUTLINE 


Unused import: 'pac jutter/material dart 
TIMELINE 


y removing the import di 
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item.dart 
DEPENDENCIES 


SUMATERA BARAT 
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Kasih jarak di gridview kasih padding kasih 15 
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X) File Edit Selection View Go Run Terminal Help F si screen.dart - covid project - Visual Studio Cod 
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child: CircularProgressIndicator(), 
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: Padding( 
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MB providers child: GridView.builder( 
@ screen gridDelegate: 
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JAWA TENGAH JAWA TIMUR 


crossAxisCount: 2, 
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crossAxisSpacing: 
childAspectRatio: 


) KALIMANTAN TIMUR 


itemCount: dataCovid.dataProvinsi.length, 
itemBuilder: (context, index) { 
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@ README 
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Color pindahka ke box decoration 
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COVID PROJECT J J ' 
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Provinsiltem StatelessWidget ( 

Provinsiltem({Key? key, L t .dataProvinsi)) : DKIJAKARTA JAWA BARAT 
J (key: key); 
DataCovid dataProvinsi; 
JAWA TENGAH JAWA TIMUR 
@override 
Widget build(BuildContext context) ( 
Container( 
decoration: BoxDecoration( aa 
color: Mcolors.amber 
» 


child: Text (daltaProvinsi .key!), KALIMANTAN TIMUR 


SUMATERA UTARA. 
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import: ‘pack 
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Tanda biru hapus 
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Help 


42 : © provinsi item.dart X & 


ProvinsiItem StatelessWidget ( 
ProvinsiItem( (Key? key, .dataProvinsi)) : DKI JAKARTA JAWA BARAT 
(key: key); 
DataCovid dataProvinsi; 
à JAWA TENGAH JAWA TIMUR 
@override 
Widget build(BuildContext context) { 
Container( 
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SULAWESI SELATAN SUMATERA BARAT 


OUTUNE 
TIMELINE 


DEPENDENCIES (or a class that this cla 


05:36 
Hoo mn iim mz P 


Border radius circular 10 
Kemudian border.all kasih colors black 
Desai bisa bebas tidak usah sama bisa dgn kreatif masing2 
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Provinsiltem telessWidget ( 
Provinsiltem((Key? key, .dataProvinsi]) : 
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DataCovid dataProvinsi; 


@override 
Widget build(BuildContext context) { 
Container( 
padding: EdgeInsets.all(10), 
decoration: BoxDecoration( 
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Disni sudah hanya sekedar buat grid 

Kita bisa sesuai ui yg dibikin dgn bagus 

Disni tampil text child ini dibuat column 

Diatas ada text dibawah ada text isinya jumlah kasus 
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COVID PROJECT 
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@override 
Widget build d t context) { 
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padding: "Insets.all(10), 
provider decoratio »xDecoration( 
reen borderRadius: BorderRadius.circular(10), 
border: Border.all(color: LlColors.black12), 
» 
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crossAxisAlignment: CrossAxi gnment.start, 
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Text(dataProvinsi.key!), 
edBox( 
height: 
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OUTLINE Try removing the import 
> TIMELINE Ov n 1 


DEPENDENCIES from) is marked as '@i. 


WE) ee) mnm cz Ss 

Kemudian buat style nya di text kasih bold 
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Text( 

dataProvinsi.key!, 
style: style(fontWeight: FontWeight.bold), 
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sight.bold), 
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JAWA TENGAH 
umiah Kosu 


BANTEN 


arish Kesus 


KALIMANTAN TIMUR 
umiah Kasu 
3 
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A 2. Covid App 02.mp4 - VLC media player — x 
Media Playback Audio Video Subtitle 
X] File Edit Selection View Go Run Terminal Help a i 0o00 - D x 


e XPLORE rm 9 ol « j € datacoviddat x  & [T 


COVID PROJECT t & 4 


Tools View Help 


MM dart too import 


OKI JAKARTA JAWA BARAT 


ring? docCount; Jumiah Kasus 
int? jumlahKasus; ja 
int? jumlahSembuh; 
int? jumlahMeninggal; 
int? jumlahDirawat; ann 


ovid.dart 
JAWA TENGAH JAWA TIMUR 


siah Kosu 


List? jenisKelamin; 


? kelompokUmur; BANTEN DAERAH ISTIMEWA 
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Yang sudah di ubah 
Screen Provinsi_layar.dart 


ProvinsiLayar StatelessWidget { 
ProvinsiLayar({Key? key}) : (key: key); 


@override 
Widget (BuildContext context) { 
Data dataVirus = Provider.of<Data>(context); 
Scaffold( 
appBar: AppBar( 
title: Text( 
J 
body: FutureBuilder( 
future: dataVirus.: ilData(), 
builder: (context, snapshoot) { 
(snapshoot.connectionState == ConnectionState.waiting) { 
Center( 
child: CircularProgresslndicatorl(), 
) 
} { 
Padding( 
padding: Edgelnsets.all(1 
child: GridView. builder( 
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( 
crossAxisCount: 2, 
mainAxisSpacing: 20, 
crossAxisSpacing: 20 
childAspectRatio: 5 / 3.5), 
itemCount: dataVirus.dataProvinsi.length, 
itemBuilder: (context, index) { 


final data = dataVirus.dataProvinsi[index]; 
return Provinsiltem(dataProvinsi: data); 


Widget / Provinsi item.dart 


import 'package:flutter/material.dart'; 
import '../models/data virus.dart'; 


class Provinsiltem extends StatelessWidget 4 
Provinsiltem((Key? key, required this.dataProvinsi}) : super(key: key); 
DataVirus dataProvinsi; 


@override 

Widget build(BuildContext context) 4 
return Container( 
padding: Edgelnsets.all(10), 
decoration: BoxDecoration( 


borderRadius: BorderRadius.circular(10), 

border: Border.all(color: Colors.green)), 
child: Column( 
crossAxisAlignment: CrossAxisAlignment.start, 
children: [ 

Text( 

dataProvinsi.key!, 

style: TextStyle( 

fontWeight: FontWeight.bold, 

), 

)r 
SizedBox( 
height: 5, 
Mo 
Text("Jumlah Kasus"), 
SizedBox( 
height: 5, 


» 
Text( 
dataProvinsi.jumlahKasus.toString(), 
style: TextStyle( 
fontWeight: FontWeight.bold, 
color: Colors.red, 


